<template>
  <!-- 展示页 -->
  <div v-loading="loading">
    <!-- 提交按钮 -->

    <el-button
      type="primary"
      :icon="Plus"
      @click="toAddSPU"
      :disabled="!category3Id"
      >添加SPU</el-button
    >

    <!-- 展示表格 -->
    <el-table border style="margin-top: 10px" :data="spu">
      <el-table-column label="序号" type="index" width="80" align="center" />
      <el-table-column label="SPU名称" prop="spuName" width="300" />
      <el-table-column label="SPU描述" prop="description" />
      <el-table-column label="操作" width="300">
        <template v-slot="{ row, $index }">
          <el-button type="primary" :icon="Plus" size="small"></el-button>
          <el-button
            type="primary"
            :icon="Edit"
            size="small"
            @click="toSpuForm(row)"
          ></el-button>
          <el-button type="info" :icon="Search" size="small"></el-button>
          <el-popconfirm
            :title="`确认是否要删除?`"
            confirm-button-text="确定"
            cancel-button-text="取消"
          >
            <template #reference>
              <el-button type="danger" :icon="Delete" size="small"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      style="margin-top: 20px"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :total="total"
      :page-sizes="[3, 6, 9]"
      layout="prev, pager, next, jumper,->,sizes,total,"
      @size-change="getSpuList"
      @current-change="getSpuList"
    />
  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  export default defineComponent({
    name: "SpuList",
  });
</script>
<script lang="ts" setup>
  import { SpuState } from "../spu";
  import type {
    SpuValueListModel,
    SpuValueModel,
  } from "@/api/product/model/spuModel";
  import { getSpuListApi } from "@/api/product/spu";
  import { useCategoryStore } from "@/stores/category";
  import { Plus, Delete, Edit, Search } from "@element-plus/icons-vue";
  import { storeToRefs } from "pinia";
  import { ref, watch } from "vue";

  /*  展示页的初始化 start  */
  const emit = defineEmits<{
    (e: "showSpuState", value: SpuState): void;
    (e: "setSpu", value: SpuValueModel): void;
  }>();
  //初始化
  const loading = ref(false);
  const currentPage = ref(1);
  const pageSize = ref(3);
  const total = ref(0);
  const spu = ref<SpuValueListModel>([]);

  const { category3Id } = storeToRefs(useCategoryStore());
  const getSpuList = async () => {
    const result = await getSpuListApi({
      page: currentPage.value,
      limit: pageSize.value,
      category3Id: category3Id.value!,
    });
    // console.log(result);
    spu.value = result.records;
    total.value = result.total;
  };
  watch(
    category3Id,
    (val) => {
      if (val) {
        getSpuList();
      } else {
        spu.value = [];
        total.value = 0;
      }
    },
    { immediate: true }
  );

  /*  展示页的初始化 end  */
  //点击修改按钮 进入SPU修改页
  const toSpuForm = (row: SpuValueModel) => {
    emit("showSpuState", SpuState.SPU_FORM);
    emit("setSpu", { ...row, spuImageList: [], spuSaleAttrList: [] });
  };

  //点击添加SPU按钮 进入SPU添加页
  const toAddSPU = () => {
    emit("showSpuState", SpuState.SPU_FORM);
    emit("setSpu", {
      category3Id: category3Id.value!, // 一定要带上
      description: "",
      spuName: "",
      tmId: undefined,
      spuImageList: [],
      spuSaleAttrList: [],
    });
  };
</script>

<style lang="scss" scoped></style>
